<template>
  <div id="conflict-feedback-filter">
    <el-tabs v-model="form.activeName" type="card">
      <el-tab-pane :label="v.label" :name="v.name" v-for="v in tabs" :key="v.name">
        <div class="filter-item">
          <span>{{v.name === 'toAudit' ? '反馈时间' : '审核时间'}}：</span>
          <el-date-picker
            v-model="form.datepicker"
            type="daterange"
            range-separator="至"
            value="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="filter-item">
          <span>对比方式：</span>
          <el-radio-group v-model="form.radio">
            <el-radio-button class="radio-btn" :label="v.id" v-for="v in radioGroupOptions" :key="v.id">{{v.label}}</el-radio-button>
          </el-radio-group>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class=hint><i class="el-icon-warning"></i>温馨提示：在初次审核2日后22:00前，可以在“已通过”（“已驳回”）列表中修改审核结果，逾期将不能修改！</div>
  </div>
</template>

<script>
export default {
  name: 'conflict-feedback-filter',
  data () {
    return {
      tabs: [
        { label: '待审核', name: 'toAudit' },
        { label: '已通过', name: 'pass' },
        { label: '已驳回', name: 'reject' }
      ],
      form: {
        activeName: 'toAudit',
        datepicker: '',
        radio: 0
      },
      radioGroupOptions: [
        { label: '全部', id: 0 },
        { label: '法规对比', id: 1 },
        { label: '合规性对比', id: 2 }
      ]
    }
  },
  watch: {
    'form.activeName': {
      handler (val) {
        this.$emit('setTabsName', val)
      },
      immediate: true
    },
    form: {
      handler (val) {
        this.setFilterOptions(val)
      },
      deep: true
    }
  },
  mounted () {
    this.setFilterOptions(this.form)
  },
  methods: {
    setFilterOptions (val) {
      let params = {}
      switch (val.activeName) {
        case 'toAudit':
          params.check_status = 1
          break
        case 'pass':
          params.check_status = 2
          break
        case 'reject':
          params.check_status = 3
      }
      if (val.datepicker && val.datepicker.length) {
        params.s_time = val.datepicker[0]
        params.e_time = val.datepicker[1]
      }
      if (val.radio) {
        params.type = val.radio
      }
      this.$emit('setFilterOptions', params)
    }
  }
}
</script>

<style lang="scss" scoped>
#conflict-feedback-filter{
  padding: 16px;
  position: relative;
  font-size: $fs-m;
  .filter-item{
    float: left;
    .radio-btn{
      /deep/ .el-radio-button__inner {
        background: rgba(245, 247, 248, 1) !important;
        border-radius: 4px;
        border:1px solid rgba(217,217,217,1);
      }
    }
    .radio-btn:not(:last-of-type){
      margin-right: 16px;
    }
    .is-active{
      /deep/ .el-radio-button__inner{
        background: #3080FE !important;
        border:1px solid #3080FE;
      }
    }
  }
  .filter-item:first-of-type{
    margin-right: 16px;
  }
  .hint{
    position: absolute;
    top: 26px;
    left: 290px;
    .el-icon-warning{
      margin-right: 5px;
      color: #FF9900;
    }
  }
}
</style>
